/**
  学籍管理-设置学生行政班级-详情
*/
<template>
    <div class="set-stu-admini-class-detail-container">
        <div style="height: 30px;">
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item :to="{ path: '/SetStuAdminiClass' }">
                <span @click="reback()">{{ $t('administrationClass.setStuAdminiClass') }}</span></el-breadcrumb-item>
                <el-breadcrumb-item>{{ $t('administrationClass.detail') }}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button style="float: right;padding-top: 0;" type="text" @click="cancel()">{{ $t('common.btn.back') }}</el-button>
        </div>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="title">
                {{ $t('administrationClass.basicInfo') }}
            </div>
            <el-row :gutter="24" style="margin-left: 25px;">
                <el-col :span="4">
                    {{ $t('administrationClass.grade') }}：
                    {{ parentParams.grade }}
                    {{ $t('administrationClass.gradeTip') }}
                </el-col>
                <el-col :span="4">
                    {{ $t('administrationClass.college') }}：
                    {{ parentParams.collegeName }}
                </el-col>
                <el-col :span="5">
                    {{ $t('administrationClass.major') }}：
                    {{ parentParams.majorName }}
                </el-col>
                <el-col :span="5">
                    {{ $t('administrationClass.adminClass') }}：
                    {{ parentParams.adminClassName }}
                </el-col>
                <el-col :span="5">
                    {{ $t('administrationClass.currentPeopleNum') }}：
                    {{ dataList.length }}
                </el-col>
            </el-row>
            <div style="border-bottom: 1px solid #ebeef5;margin-top: 30px;"></div>
            <div class="major-sub-title">
                {{ $t('administrationClass.setStuAdminiClass') }}
            </div>
            <div style="margin: 20px 0;">
                <el-input
                    v-model="studentOrName"
                    :placeholder="$t('administrationClass.selectPlaceholder')"
                    @keyup.enter.native="queryInfo()"
                    style="width: 300px">
                    <i
                        class="el-icon-search"
                        slot="suffix"
                        style="margin-top:10px;cursor:pointer"
                        @click="queryInfo()"
                    ></i>
                </el-input>
            </div>
            <edu-table
                :pagination="false"
                :order="false"
                :tooltipEffect="tooltipEffect"
                stripe
                :data="dataList"
                size="mini"
                @selection-change="handleSelectionChange">
                    <edu-table-column
                        :label="$t('administrationClass.studentId')"
                        prop="studentId">
                    </edu-table-column>
                    <edu-table-column
                        :label="$t('administrationClass.name')"
                        prop="studentName">
                    </edu-table-column>
                    <edu-table-column
                        :label="$t('administrationClass.sex')"
                        prop="sex">
                    </edu-table-column>
                    <edu-table-column
                        :label="$t('administrationClass.national')"
                        prop="nation">
                    </edu-table-column>
            </edu-table>
            <div class="major-operate-bar">
                <el-button style="padding-top: 0;" type="primary" @click="addStudent()">{{ $t('administrationClass.addStudent') }}</el-button>
                <el-button style="padding-top: 0;" type="danger" @click="deleteStudent()">{{ $t('administrationClass.deleteStudent') }}</el-button>
                <el-button style="padding-top: 0;" @click="reback()">{{ $t('administrationClass.reback') }}</el-button>
            </div>
        </el-card>
        <el-dialog
            :before-close="beforeClose"
            :title="$t('administrationClass.addStudent')"
            width="50%"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="margin-bottom: 20px;">
                <el-input
                    v-model="studentOrNameDialog"
                    :placeholder="$t('administrationClass.selectPlaceholder')"
                    @keyup.enter.native="queryStuInfo()"
                    style="width: 300px">
                    <i
                        class="el-icon-search"
                        slot="suffix"
                        style="margin-top:10px;cursor:pointer"
                        @click="queryStuInfo()"
                    ></i>
                </el-input>
            </div>
            <edu-table
                :pagination="false"
                :order="false"
                :tooltipEffect="tooltipEffect"
                stripe
                :data="stuDataList"
                size="mini"
                @selection-change="handleStuSelectionChange">
                    <edu-table-column
                        :label="$t('administrationClass.studentId')"
                        prop="studentId">
                    </edu-table-column>
                    <edu-table-column
                        :label="$t('administrationClass.name')"
                        prop="studentName">
                    </edu-table-column>
                    <edu-table-column
                        :label="$t('administrationClass.sex')"
                        prop="sex">
                    </edu-table-column>
                    <edu-table-column
                        :label="$t('administrationClass.national')"
                        prop="nation">
                    </edu-table-column>
            </edu-table>
            <div class="major-dialog-operate-bar">
                <el-button style="padding-top: 0;" @click="cancelChoose()">{{ $t('common.btn.cancel') }}</el-button>
                <el-button style="padding-top: 0;" type="primary" @click="confirmToChoose()">{{ $t('common.btn.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getMajorDirectionStus,
    updateMajorDirecStus
} from 'common/src/api/studentinfo'
export default {
    name: "SetStuMajorDirectionDetail",
    props: {
        parentParams: {
            type: Object,
            default: () => {}
        }
    },
    components: {
    },
    data() {
        return {
            userInfo: {},
            currentNum: 0,
            studentOrName: '',
            dialogVisible: false,
            studentOrNameDialog: '',
            stuDataList: [],
            dataList: [],
            multiData: [],
            stuMultiData: []
        };
    },
    mounted() {
        this.getAdminiClassStusInfo()
    },
    methods: {
        // 获取已设置行政班级学生列表
        getAdminiClassStusInfo() {
            this.dataList = []
            getMajorDirectionStus({
                "grade": parseInt(this.parentParams.grade),
                "faculty": this.parentParams.collegeCode,
                "professionCode": this.parentParams.majorCode,
                "administrativeClass": this.parentParams.adminClassCode,
                "settingType": 2,
                "studentIdOrName": this.studentOrName
            }).then(res => {
                if (res.code === 200 && res.data.length > 0) {
                    this.dataList = res.data
                }
            })
        },
        reback() {
            this.$emit('change-admini-class-index')
        },
        // 返回
        cancel() {
            this.$emit('change-admini-class-index')
        },
        queryInfo() {
            this.getAdminiClassStusInfo()
        },
        handleSelectionChange(val) {
            this.multiData = val
        },
        // 获取未设置行政班级学生列表
        getNotSetAdminiClassStusInfo() {
            this.stuDataList = []
            getMajorDirectionStus({
                "grade": parseInt(this.parentParams.grade),
                "faculty": this.parentParams.collegeCode,
                "professionCode": this.parentParams.majorCode,
                "settingType": 2,
                "studentIdOrName": this.studentOrNameDialog
            }).then(res => {
                if (res.code === 200 && res.data.length > 0) {
                    this.stuDataList = res.data
                }
            })
        },
        // 添加学生
        addStudent() {
            this.dialogVisible = true
            this.studentOrNameDialog = ''
            this.getNotSetAdminiClassStusInfo()
        },
        // 删除学生
        deleteStudent() {
            if (this.multiData.length === 0) {
                this.$message({
                    type: "warning",
                    message: this.$t('administrationClass.pleaseChoose')
                })
                return
            }
            this.$delConfirm().then(_ => {
                updateMajorDirecStus({
                    "settingType": 2,
                    "operateType": 2,
                    "studentIdList": this.multiData.map(item => {
                        return item.studentId
                    })
                }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            type: "success",
                            message: this.$t('administrationClass.deleteSuccessfullyTip')
                        })
                        this.getAdminiClassStusInfo()
                    }
                })
            })
        },
        // 关闭x事件
        beforeClose: function (done) {
            this.dialogVisible = false
        },
        // 查询学生信息
        queryStuInfo() {
            this.getNotSetAdminiClassStusInfo()
        },
        // 添加勾选学生
        handleStuSelectionChange(val) {
            this.stuMultiData = val
        },
        // 取消选择学生
        cancelChoose() {
            this.dialogVisible = false
        },
        // 确认添加学生
        confirmToChoose() {
            if (this.stuMultiData.length === 0) {
                this.$message({
                    type: "warning",
                    message: this.$t('administrationClass.pleaseChoose')
                })
                return
            }
            updateMajorDirecStus({
                "administrativeClass": this.parentParams.adminClassCode,
                "settingType": 2,
                "operateType": 1,
                "studentIdList": this.stuMultiData.map(item => {
                    return item.studentId
                })
            }).then(res => {
                if (res.code === 200) {
                    this.$message({
                        type: "success",
                        message: this.$t('administrationClass.addSuccessfullyTip')
                    })
                    this.dialogVisible = false
                    this.getAdminiClassStusInfo()
                }
            })
        }
    },
    watch: {
        
    }
};
</script>
<style lang="scss" scoped>
.set-stu-admini-class-detail-container ::v-deep {
    .el-breadcrumb__item:last-child ::v-deep {
      .el-breadcrumb__inner {
        color: #606266;
        font-weight: bold;
        cursor: default
      }
    }
    .el-breadcrumb__item ::v-deep {
      .is-link {
        color: #aaa;
        font-weight: unset;
      }
      .is-link:hover {
        color: #409eff;
      }
    }
    .title {
        margin-bottom: 30px;
        font-size: 18px;
    }
    .major-sub-title {
        font-size: 18px;
        margin-top: 30px;
    }
    .major-operate-bar {
        margin-top: 20px;
        text-align: center;
    }
    .major-dialog-operate-bar {
        margin-top: 20px;
        text-align: right;
    }
}
</style>